<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * 三种软件架构设计模式
         * 
         * MVC-重心在控制器C,model与view有交互-简单粗暴，适合小项目--强调责任分离
         * 
         * Model(模型)-View(视图)-Controller(控制器)
         * 
         * model 负责管理应用程序的核心数据操作和业务逻辑
         * view 显示数据--负责展示逻辑
         * 并且view 和 model运用了观察者模式，当model层发生改变它会通知view,进行页面更新
         * controller 视图和模型的纽带，当页面与用户发生交互，他的事件触发器就工作，修改model数据，model再通知view
         * **/ 

        /*
        MVVM(Model-View-ViewModel)--代表Vue的思想

        model-程序的状态和业务逻辑
        view 视图，显示由ViewModel准备的数据，将用户通知给ViewModel
        viewModel(视图模型，视图和数据的转换)  充当视图数据的绑定层---监听model层数据的改变，并且控制视图的更新，处理用户的交互操作

        和MVC不同,MVVM的 model和view并无直接关联，而是通过viewModel来联系的
        viewModel 它监听页面dom节点的变化，dom节点发生改变，数据也会发生对应的改变,因此当Model中的数据改变时,viewModel会触发View层的刷新，这就是双向绑定View中由于⽤户交互操作⽽改变的
        数据也会在Model中同步。ViewModel 则是连接 Model 和 View 的桥梁，它将 Model 中的数据转换为 View 可以显示的形式，并处理 View 中的用户输入，将其转换为对 Model 的操作
        这种模式实现了 Model和View的数据⾃动同步，因此开发者只需要专注于数据的维护操作即可，⽽不需要⾃⼰操作DOM。

        优点是清晰的结构划分，缺点是学习成本略高
        */ 

        /*
            MVP--angular
            P是扮演中间人的作用
            MVC 和 MVP 的区别就是，在 MVP 中 M 和 V 没有直接通信，从而实现了三者的解耦合
        */ 
    </script>
</body>
</html>